<script setup>
  import {
    reactive
  } from 'vue'
  import UserHeadInfo from './components/User-Head-Info.vue'
  import WorkLayout from './components/Work-Layout.vue'
  const user = reactive({
    avatar: "https://geiqiutiyu.oss-cn-hangzhou.aliyuncs.com/uploads/20240902/a4609b998176e96f6025ad2b4ea3e849.jpg",
    name: "微信昵称sdfghj",
    permission: true,
    desc: "设计师在摸鱼没有留下什么作品~设计师在摸鱼没有留下什么作品~设计师在摸鱼没有留下什么作品~设计师在摸鱼没有留下什么作品~",
    followedShow: false
  })
  const radios = reactive([{
      checked: true,
      name: "全部"
    },
    {
      checked: false,
      name: "广场"
    },
    {
      checked: false,
      name: "私密"
    }
  ])

  function radioClick(name) {
    radios.forEach((item, index) => {
      item.checked = index === name;
    });
  }
</script>
<template>
  <view class="creation-page">
    <UserHeadInfo :userInfo="user"></UserHeadInfo>
    <view class="creation-title">TA的作品（2）</view>
    <view class="creation-tags">
      <view class="u-page__tag-item" v-for="(item, index) in radios" :key="index">
        <up-tag :text="item.name" :plain="!item.checked" :color="!item.checked?'#333':'#FF416C'"
          :bgColor="!item.checked?'#E6E6E6':'#FFE8EA'" shape="circle" borderColor="transparent" :name="index"
          @click="radioClick">
        </up-tag>
      </view>
    </view>
    <view class="creation-list">
      <up-waterfall v-model="flowList">
        <template v-slot:left="{leftList}">
          <view v-for="(item, index) in 10" :key="index">
            <WorkLayout></WorkLayout>
          </view>
        </template>
        <template v-slot:right="{rightList}">
          <view v-for="(item, index) in 10" :key="index">
            <WorkLayout></WorkLayout>
          </view>
        </template>
      </up-waterfall>
    </view>
  </view>
</template>

<style lang="less" scoped>
  .creation-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 48rpx 24rpx;

    .creation-title {
      font-size: 32rpx;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      margin-top: 60rpx;
    }

    .creation-tags {
      display: flex;
      margin-top: 34rpx;

      .u-page__tag-item {
        margin-right: 16rpx;
      }
    }
    .creation-list{
      margin-top: 20rpx;
    }
  }
</style>